import { useState } from "react";
/**
 * 表单绑定
 * 【说明】：使用useState组件控制表单的状态、从而实现数据的双向绑定
 * 【步骤】：1、通过value绑定useState的状态
 *          2、绑定onChange事件、通过事件对象e拿到最新的值，使用set方法进行修改useState状态
 */

function useBinding() {
  // 1、声明useState创建数据状态
  const [value, setValue] = useState("")
  let valueChange = (e) => {
    console.log(e.target);
    setValue(e.target.value)
  }
  return (
    <div>
      {/* 2、通过输入框的value绑定useState数据状态、通过Change事件 + 事件对象进行数据绑定 */}
      <input type="text" value={value} onChange={(e) => valueChange(e)} />
      <div>{value}</div>
    </div>
  )
}

export default useBinding
